Setting group - Product slideshow settings

The Product Slideshow Settings are essential for managing the core theme settings of the slideshow component within a theme. These settings influence the overall look and feel of the slideshow, which is applied site-wide but can be customized at the section or block level. They offer options for tailoring the slideshow's appearance and functionality on both desktop and mobile devices.

Key settings include the number of columns for desktop and mobile, animation style and speed, autoplay options, and pagination style. Users can adjust these settings to create a visually appealing and functional slideshow that enhances the user experience. For instance, the Slideshow column count can be set differently for desktop and mobile to accommodate varying screen sizes and design preferences.

Usage examples include creating a dynamic product showcase by adjusting column counts and enabling autoplay, or highlighting featured products with a fade animation style. Additionally, customizing mobile settings ensures the slideshow is optimized for smaller screens, providing a seamless browsing experience. These settings offer a flexible starting point for designing a slideshow that meets diverse user needs and device requirements.

Overview

The Product Slideshow Settings manage the core theme settings for the slideshow component within a theme. These settings control the app-wide look and feel of the slideshow, which is generally applied throughout the site but can be overridden at the section or block level. The settings allow for customization of the slideshow's appearance and behavior on both desktop and mobile devices.

Key components and functionality

Slideshow settings

Slideshow settings are applicable when the image style is set to Slideshow and the card style is not Banner. These settings provide flexibility in designing a visually appealing and functional slideshow that enhances the user experience across different devices.

Slideshow column count for desktop

This setting determines the number of columns displayed in the product slideshow on desktop devices. It allows for a range between 1 and 5 columns, with increments of 0.1. The default value is 1.1.

Slideshow column count for mobile

Similar to the desktop setting, this controls the number of columns in the product slideshow on mobile devices. The range is also between 1 and 5, with a default value of 1.1. Mobile settings are provided to allow for different configurations that may be more suitable for smaller screens, such as different aspect ratios or padding values.

Animation style

This setting allows you to choose the style of animation for the slideshow transitions. Options include default and fade, with the default being default. The fade style will force a single slide layout.

Animation speed

This controls the speed of the slideshow animations, measured in seconds. The speed can be set between 0.1 and 5 seconds, with a default of 0.8 seconds.

Autoplay delay

This setting specifies the delay between slides when autoplay is enabled. The delay can range from 0 to 10 seconds, with a default of 4 seconds.

Autoplay slideshow

A checkbox option that enables or disables the autoplay feature for the slideshow. The default setting is false.

Pagination style

This setting determines the style of pagination used in the slideshow. Options include dynamic, fraction, progress bar, and scrollbar. The Show pagination setting must be active for pagination to be visible, and pagination will not be shown in the Fade animation style.

Loop slides

A checkbox option that, when enabled, allows the slideshow to loop back to the beginning after the last slide. The default setting is false. Note that looping will hide pagination.

Show navigation

This checkbox option enables or disables the navigation interface for the slideshow. The default setting is true. The navigation interface allows users to manually navigate through the slides.

Show pagination

This checkbox option controls the visibility of the pagination interface, which shows the number of slides. The default setting is true. Pagination is not shown in the Fade animation style.

Usage examples

1. Dynamic product showcase: You might consider using the slideshow settings to create a dynamic and engaging product showcase on your homepage. Adjust the column count to display multiple products at once and enable autoplay to cycle through them automatically.

2. Highlighting featured products: Consider using the fade animation style to smoothly transition between featured products, drawing attention to each item. Adjust the animation speed to match the pace of your site's overall design.

3. Mobile-friendly design: Customize the mobile column count to ensure that your slideshow looks great on smaller screens. Enable the Show navigation option to allow users to easily browse through slides on mobile devices.

These settings provide a good starting point for designing a slideshow that meets the needs of different users and devices.